<template>
  <el-card shadow="never" header="通知公告" class="dashboard-notices-panel">
    <div v-for="(item, index) in notices" :key="index" class="wh-full py-3">
      <div class="flex-y-center">
        <LabelText text="通知" />
        <el-text
          size="small"
          class="w200px cursor-pointer !ml-2 !flex-1"
          truncated
          @click="handleReadNotice(item.id)"
        >
          {{ item.title }}
        </el-text>

        <div class="text-xs text-gray">
          {{ item.publishTime }}
        </div>
      </div>
    </div>

    <NoticeDetail ref="noticeDetailRef" />
  </el-card>
</template>

<script setup lang="ts">
import NoticeAPI, { NoticePageVO } from "@/api/system/notice";
import DictLabel from "@/components/Dict/DictLabel.vue";
import LabelText from "@/components/label/label-text.vue";
import NoticeDetail from "@/views/notice/components/NoticeDetail.vue";

const notices = ref<NoticePageVO[]>([]);
const noticeDetailRef = ref();

// 阅读通知公告
function handleReadNotice(id: string | number) {
  noticeDetailRef.value.openNotice(id);
  const index = notices.value.findIndex((notice) => notice.id === id);
  if (index >= 0) {
    notices.value.splice(index, 1); // 从消息列表中移除已读消息
  }
}

//
onMounted(() => {
  NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 5, isRead: 0 }).then((data) => {
    notices.value = data.list;
  });
});
</script>

<style lang="scss" scoped></style>
